<template>
  <main>
    <div v-loading:[api]="visible" class="chart">
      <BaseChart ref="chart" :option="option" :events="eventArgs"></BaseChart>
    </div>
    <div>
      <a-config-provider
        :theme="{
          token: {
            colorPrimary: 'red',
            borderRadius: 4,
            colorBgContainer: 'yellow',
            colorBgElevated: 'blue',
          },
        }"
      >
        <a-button type="primary" @click="handleClick">click</a-button>
        <a-button @click="handleClick1">click</a-button>
        <a-select ref="select" v-model:value="value1" style="width: 120px">
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-date-picker v-model:value="value1" />
      </a-config-provider>

      <h1 id="test" class="bg-[#50d71e] text-3xl font-bold underline test">
        Hello world!2344444444444444444
      </h1>

      <DownOutlined />
    </div>
  </main>
</template>
<script setup lang="ts">
import {
  // login,
  getUserInfo,
} from '@/api/user'
// import { useMenuConfigStore } from '@/stores/menu-config'
// import { useUserStore } from '@/stores/user'
// import { theme } from 'ant-design-vue'
import bus from '@/utils/event-bus'
// const { token } = theme.useToken()
// const { siderMenuWidth, siderMenuCollapsedWidth, siderMenuCollapsed, siderMenuIconIndent } =
//   storeToRefs(useMenuConfigStore())
// const { isLogin } = storeToRefs(useUserStore())
const api = { tip: 'loading' }
// const api1 = { size: 'large', tip: 'loading', backgroundColor: 'rgba(0, 0, 0, .8)' }
const chart = shallowRef()
const visible = ref(true)
// const visible1 = ref(true)
const value1 = ref()
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],
}
const handleChartClick = (data: any) => {
  console.log('🚀 ~ data11:', data)
}

const eventArgs = [
  { eventName: 'click', handler: handleChartClick },
  {
    eventName: 'click',
    query: 'series',
    handler: (data: any) => {
      console.log('🚀 ~ data22:', data)
    },
  },
]
let obj: any = {}
const handleClick = () => {
  visible.value = !visible.value
  obj = getUserInfo({ name: 1 })
  obj.request.then((res: any) => {
    console.log('🚀 ~ res:', res)
  })
}
// const router = useRouter()
const handleClick1 = () => {
  // visible1.value = !visible1.value
  // obj.cancel('88888')
  // router.push('/example/xlsx')
  bus.emit(
    'test',
    {
      name: 1,
      age: () => {
        console.log('age')
      },
    },
    2,
    3
  )
  // bus.off(id)
}
// const handler = (a, b, c, d) => {
//   console.log('🚀 ~ handler:', a, b, c, d)
// }
// const id = bus.on('test', handler)
// bus.on('update', handler)
onMounted(() => {
  chart.value.chartInstance.on('click', function (data: any) {
    console.log(data, 12)
  })
})
// onBeforeUnmount(() => {
//   chart.value.chartInstance = null
// })
</script>
<style scoped lang="scss">
.chart {
  // width: 300px;
  height: 300px;
}

.test {
  position: absolute;
}
</style>
